import React, { forwardRef, useContext } from "react"
import { ConfigContext } from "../config-provider"
import { cs } from "../../utils"
import useMergeProps from "../../hooks/useMergeProps"
import { MenuProps } from "./interface"
import { MenuContext } from "./context"
import Item from "./Item"

import "./style/index.ts"

const defaultProps = {
    mode: "vertical",
    selectable: true,
    ellipsis: true,
    theme: "light"
}
function MenuComponent(baseProps: MenuProps, ref) {
    const { getPrefixCls } = useContext(ConfigContext);
    const props = useMergeProps(baseProps, defaultProps)
    const prefixCls = getPrefixCls("menu")
    const {
        children,
        style,
        className,
        mode,
        theme
    } = props
    const classNames = cs(prefixCls,
        `${prefixCls}-${theme}`,
        `${prefixCls}-${mode}`
    )
    const renderChildren = () => {
        return (
            <>
                <div className={`${prefixCls}-inner`}>
                    <div className={`${prefixCls}-overflow-wrap`}>
                        {children}
                    </div>
                </div>
            </>
        )
    }
    return (
        <div
            ref={ref}
            role="menu"
            className={classNames}
            style={{ ...style }}
        >
            <MenuContext.Provider
                value={{
                    prefixCls
                }}
            >
                {renderChildren()}
            </MenuContext.Provider>
        </div>
    )
}
const ForwardRefMenu = forwardRef<unknown, MenuProps>(MenuComponent)
const Menu = ForwardRefMenu as typeof ForwardRefMenu & {
    Item: typeof Item
}
Menu.Item = Item
Menu.displayName = "Menu"
export default Menu
export * from "./interface"
